<template>
  <a-layout class="pageAll">
    <a-layout-sider
        breakpoint="sm"
        collapsed-width="0"
        v-model="collapsed"
        :trigger="null"
        collapsible>
      <!-- theme="light" -->
      <div class="Navlogo" >
        <a-icon type="schedule" />
        渠道对接
      </div>
      <a-menu theme="dark" mode="inline" v-model:openKeys="openNavList"  @openChange="onOpenNav">
        <a-sub-menu :key="nav.MenuID" v-for="nav in NavBarData">
          <template #icon v-if="nav.MenuID === 100">
            <DeploymentUnitOutlined />
          </template>
          <template #icon v-if="nav.MenuID === 5">
            <HddOutlined />
          </template>
          <template #icon v-if="nav.MenuID === 1">
            <BankOutlined />
          </template>
          <template #title>{{nav.MenuTitle}}</template>
          <a-menu-item :key="nChild.MenuID" v-for="nChild in nav.Children">
            <router-link :to="nChild.MenuPath">{{nChild.MenuTitle}}</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout >
      <a-layout-header class="pageHead">
        <menu-fold-outlined class="triggerIcon headTool" v-show="collapsed" @click="() => (collapsed = !collapsed)"/>
        <menu-unfold-outlined class="triggerIcon headTool" v-show="!collapsed" @click="() => (collapsed = !collapsed)"/>
        <a-switch class="openMethod headTool" checked-children="Tab" un-checked-children="Cover" :checked="isOpenRemember"  @change="changeOpenType" />
        <div style="width: 100%;padding-right: 30px">
          <a-button style="color: black;float: right;" @click="loginout()">退出</a-button>
        </div>
      </a-layout-header>
      <a-layout-content class="pageCont">
        <a-spin  tip="Loading..." :spinning="loading" >
          <a-tabs v-show='isOpenRemember' size="small" class="pgTab"
                  :activeKey="actPage"
                  hide-add type="editable-card"
                  @tabClick="changePage"  @edit="onDelPage">
            <a-tab-pane v-for="(pg,pgInd) in pageTabList" :key="pgInd" :tab="pg.title" :closable="pgInd!=0">
            </a-tab-pane>
          </a-tabs>
          <router-view class="moduleAll" :class="{hasTab:isOpenRemember}" />
        </a-spin>
      </a-layout-content>
    </a-layout>

  </a-layout>
</template>

<script>
import { mapState } from 'vuex'
// import {loginout} from "@/utils/api";
import {
  DeploymentUnitOutlined,
  HddOutlined,
  BankOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from "@ant-design/icons-vue"
export default {
  name: "home",
  components:{
    DeploymentUnitOutlined,
    HddOutlined,
    BankOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined
  },
  computed: {
    ...mapState([
      'isOpenRemember',
      'pageTabList',
      'actPage',
    ]),
  },
  data(){
    return{
      loading:false,
      collapsed: false,
      openNavList:[],
      NavBarData:[{
        MenuTitle:"渠道链接",
        Icon:"deployment-unit",
        MenuID:100,
        Children:[{
          MenuID:101,
          MenuTitle:"链接列表",
          MenuPath:"/linklist",
        },{
          MenuID:102,
          MenuTitle:"添加链接",
          MenuPath:"/addlist",
        },{
          MenuID:103,
          MenuTitle:"回调列表",
          MenuPath:"/callList",
        }],
      },{
        MenuTitle:"系统管理",
        Icon:"user",
        MenuID:1,
        Children:[],
      }]
    }
  },
  mounted() {

  },
  methods: {
    loginout(){
      var data = new FormData();
      var user = localStorage.getItem("user");
      data.append("account",user)
      loginout({
        method: "POST",
        data:data
      }).then((res)=>{
        this.$message.success("登出成功");
        this.$router.replace("/")
      })
    },
    changeOpenType(e){
      // console.log(e);
      this.$store.commit('changeOpenRemember',e)
    },
    changePage(e){
      // console.log(e);
      if(e!=this.actPage){
        this.$store.commit('changeActPage',e)
        this.$router.push({path:this.pageTabList[e].path})
      }

    },
    onDelPage(e){
      // console.log('del',e);
      let arr=this.pageTabList,len=arr.length;
      if(e==len-1&&this.actPage==e){//删的是最后一页
        this.$router.push({path:this.pageTabList[len-2].path})
      }
      this.$store.commit('delPage',e)
    },
    onOpenNav(e){
      // console.log(e);
      let endKey=e.pop();
      this.openNavList=endKey?[endKey]:[];
    },
  },
}
</script>

<style lang="scss">
.pageAll{
  width: 100vw;
  height:100vh;
  .Navlogo{
    height: 32px;
    background-color: $colTheme;
    opacity: 0.7;
    margin: 16px;
    color:$colWhite;
    @extend .GFlex;
    .anticon {
      margin-right: 5px;
    }
  }
  .pageHead{
    padding: 0 ;
    display: flex;
    align-items: center;
    .headTool{
      margin: 0 10px;
    }
    .triggerIcon {
      font-size: 18px;
      line-height: 100%;
      cursor: pointer;
      color: #ffffff;
      transition: color 0.3s;
    }
    // .openMethod{
    // }
  }
  .pageCont{
    overflow: hidden;
    padding:10px;
    height: 100%;
    .pgTab::v-deep{
      .ant-tabs-bar{
        margin: 0;
      }
      ::v-deep.ant-tabs-card-bar,.ant-tabs-tab{
        height: 26px;
        line-height: 26px;
        font-size: 12px;
      }
    }
    .moduleAll{
      width: 100%;
      background-color: #ffffff;
      height: calc(100vh - 64px - 20px);
      overflow-y: auto;
      &.hasTab{

        height: calc(100vh - 64px - 20px - 26px);
      }
    }
  }

}
</style>
